<style>
    .table-container {
        background-color: transparent;
        color: white;
        width: 100%;
        /* height: 270px; */
        padding: 30px 0px 20px 0px;
        text-align: left;
        table-layout: fixed;
        border: none;
    }

    .table-container td {
        padding-left: 8px;
        /* padding-right: 15px; */
    }

    .table-container th.bluetooth-name {
        padding-left: 8px;
    }

    .table-container th.bluetooth-pair {
        padding-left: 8px;
        width: 35px;
    }
    .table-container th.bluetooth-conn {
        padding-left: 8px;
        padding-right: 5px;
        width: 35px;
    }
    .bluetooth-info span {
        min-width: 50px;
    }

    .hide {
        display: none;
    }
</style>

<div class="bluetooth-info">

</div>
<!-- <div class="mdl-spinner mdl-js-spinner is-active"></div> -->

<table class="table-container" rules="none">
    <thead>
        <tr>
            <th class="bluetooth-name">{{'设备名' | translate}}</th>
            <th class="bluetooth-pair">{{'配对' | translate}}</th>
            <th class="bluetooth-conn">{{'连接' | translate | limitTo : 4}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="bluetooth in show" ng-init="$last && $emit('repeatFinished')"
            ng-class="{ active: $index == itemIndex}">
            <td class="bluetooth-name">{{bluetooth.name}}</td>
            <td class="bluetooth-pair">{{bluetooth.paired}}</td>
            <td class="bluetooth-conn">{{bluetooth.connected}}</td>
        </tr>
    </tbody>
</table>